﻿@model Vit.Web.Models.WebPage
@{
    Layout = "../Shared/_Dialog.cshtml";
    ViewBag.Title = "Administration Index Page";
    string[] sections = new string[] { "header", "left", "main", "right", "footer" };
    var allWidgets = PortalHelper.GetAllWidgets();
    var widgets = allWidgets.Cast<Widget, SelectListItem>(o => new SelectListItem() { Text = o.WidgetName, Value = o.WidgetName });         
    var containers = Theme.GetContainers().Cast<string, SelectListItem>(o=> new SelectListItem() { Text = o, Value = o });
}
<h2>Page: @this.Model.Name Section:@ViewBag.Section</h2>
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "edit-form", name = "edit-form" }))
{
    @Html.Hidden("WebPageName", this.Model.Name)
    @Html.Hidden("SectionName", (object)ViewBag.Section)
    <table id="widgetList">
        <thead>
            <tr>
                <td class="caption">Order</td>
                <td class="caption">WidgetName</td>
                <td class="caption">CacheSeconds</td>
                <td class="caption">Container</td>
                <td class="caption">Parameters</td>
                <td></td>
            </tr>
        </thead>
        <tbody>
        @foreach (var pw in this.Model.Widgets.Where(o=>o.SectionName == ViewBag.Section))
        {
            var key = string.Format("{0}${1}${2}", this.Model.Name, ViewBag.Section, pw.Order);
            <tr>
                <td>@pw.Order</td>
                <td>@pw.WidgetName</td>
                <td>@pw.CacheSeconds</td>
                <td>@pw.Container</td>
                <td>@pw.Parameters</td>
                <td>
                    <a>Up</a>
                    <a>Down</a>
                    <a href="javascript:void();" onclick="EditWidget(this, '@key');">Edit</a>
                    <a href="/Page/RemoveWidget/@key">Remove</a>
                </td>
            </tr>
        }
        </tbody>
    </table>
    <a href="javascript:void();" onclick="NewWidget();">Add New Widget</a>
    <div id="details" style="display:none;">
    @Html.Hidden("EntityID")
    @Html.Hidden("Order")
    <table>
        <tr><td class="caption">WidgetName</td><td>
            <select id="WidgetName" name="WidgetName" onchange="SelectWidget(this);">
            <option value=""></option>
            @foreach (var widget in allWidgets)
            {
                <option value="@widget.WidgetName" para="@widget.DefaultParameters" help="@widget.HelpUrl">@widget.WidgetName</option>
            }
            </select>
        </td></tr>
        <tr><td class="caption">CacheSeconds</td><td>@Html.TextBox("CacheSeconds")</td></tr>
        <tr><td class="caption">Container</td><td>@Html.DropDownList("Container", containers, "")</td></tr>
        <tr><td class="caption">Parameters</td><td>@Html.TextArea("Parameters")</td></tr>
        <tr><td id="helpTd" colspan="2"></td></tr>
    </table>
    </div>
    
    <script type="text/javascript">
        function SelectWidget(ele) {
            var op = $("option:selected", $(ele));
            var para = op.attr('para');
            var help = op.attr('help');
            $('#Parameters').val(para);
            if (help.length > 0)
                $('#helpTd').html('<a href="' + help + '" target="_blank">Help</a>');
            else
                $('#helpTd').empty();
        }

        function NewWidget() {
            $('#Order').val($('#widgetList tbody tr').length + 1);
            $('#EntityID').val('');
            $('#WidgetName').val('');
            $('#CacheSeconds').val('');
            $('#Container').val('');
            $('#Parameters').val('');
            $('#details').show();
        }

        function EditWidget(ele, key) {
            var td = $(ele).parent();
            $('#EntityID').val(key);
            $('#Container').val(td.prev().prev().text());
            $('#CacheSeconds').val(td.prev().prev().prev().text());
            $('#WidgetName').val(td.prev().prev().prev().prev().text()).trigger('change');
            $('#Parameters').val(td.prev().text());
            $('#Order').val(td.prev().prev().prev().prev().prev().text());
            $('#details').show();
        }
    </script>
}
